<template>
    <div class="musicTitleBoxAndmusicSearchTitle">
        <div class="musicTitleBox">
            <el-text size="large" class="MusicTitle">音乐</el-text>
            <div class="player">
                <div>
                    <el-text size="small" truncated>{{ showMuiscName }}</el-text>
                </div>
                <div class="playerIconBox">
                    <div>
                        <!-- 播放模式 -->
                        <el-icon :size="24" v-if="true">
                            <loop />
                        </el-icon>
                        <el-icon v-if="false">
                            <DArrowLeft />
                        </el-icon>
                        <el-icon v-if="false">
                            <DArrowLeft />
                        </el-icon>
                    </div>
                    <div @click="Pre" >
                        <el-icon>
                            <DArrowLeft />
                        </el-icon>
                    </div>
                    <div @click="playMusic">
                        <el-icon v-show="playIcon" :size="20">
                            <VideoPause />
                        </el-icon>
                        <el-icon v-show="!playIcon" :size="20">
                            <VideoPlay />
                        </el-icon>
                    </div>
                    <div @click="Next" >
                        <el-icon>
                            <DArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="SearchOptionBox">
            <el-input placeholder="搜索喜欢的音乐~" :prefix-icon="Search"></el-input>
        </div>
    </div>
</template>
<script setup>
// 图标
import { Search } from "@element-plus/icons-vue"
import loop from "@/components/Public/MyIcon/loop.vue";
// Vue
import { ref, getCurrentInstance, watch, onMounted } from "vue";
// 公共变量中转站
let global_Object = getCurrentInstance().appContext.config.globalProperties

// 播放图标控制
let playIcon = ref(false);
playIcon.value = global_Object.$music.playStatus;
watch(global_Object.$music, (newValue) => {
    playIcon.value = newValue.playStatus;
})

// 显示播放名称
let showMuiscName = ref("");
// 获取当前播放音乐名称
function getNowMusicName(){
    let name = global_Object.$music.getNowPlayName();
        if (name) {
            if (name.length > 10) {
                name = name.slice(0, 8) + "..."
            }
            showMuiscName.value = name
        } else {
            showMuiscName.value = "暂无播放"
        }
}
onMounted(() => {
    getNowMusicName();
    watch(global_Object.$music, () => {
        getNowMusicName();
    })
})

function playMusic() {
    global_Object.$music.play(!playIcon.value);
}
function Next(){
    global_Object.$music.UseNext();
}
function Pre(){
    global_Object.$music.usePre();
}


</script>
<style lang="less" scoped>
.musicTitleBoxAndmusicSearchTitle {
    margin-top: 10%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4%;

    .musicTitleBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        .player {
            display: grid;
            grid-template-columns: 1fr 2fr;

            align-items: center;
            background-color: var(--player);
            width: 80%;
            padding: 5px;
            border-radius: 6px;
            box-shadow: 1px 1px 1px 1px rgba(133, 133, 133, 0.3);
            line-height: 100%;

            .playerIconBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 100%;
                padding-left: 2%;
            }
        }
    }

    .MusicTitle {
        font-size: 1.5em;
    }

    // 搜索框的样式
    .SearchOptionBox {
        padding-top: 4%;

        :deep(.el-input-group__prepend) {
            border-radius: 95px;
            border: 0;
            box-shadow: 0 0 0 0px;
        }

        :deep(.el-input__wrapper) {
            background-color: var(--SearchOptionInput);
            border-radius: 95px;
            border: 0;
            box-shadow: 0 0 0 0px;
        }

        :deep(.el-input-group__append) {
            border-radius: 95px;
            border: 0;
            box-shadow: 0 0 0 0px;

        }
    }
}
</style>